<template>
	<view>
		<view class="big">
			<image :src="url" style="width: 100%;filter: blur(4px);"></image>
			<view class="avatar">
				<button style="width: 300rpx;" plain open-type="getUserProfile" @tap='dologin'>
					<view class="avatarName">
						<image :src="url" style="width: 100%;height: 208rpx;"></image>
					</view>
					<text style="font-size: 36rpx;"></text>
				</button>
			</view>
			<!-- 栏目 -->
			<view class="columnBig">
				<van-row>
					<van-col span="6">
						<view class="column">
							<text style="font-size: 38rpx;color: #ff0000;">0</text>
							<text style="font-size: 30rpx;color: #9c9c9c;">收藏的店铺</text>
						</view>
					</van-col>
					<van-col span="6">
						<view class="column" @tap="collect">
							<text style="font-size: 38rpx;color: #ff0000;">0</text>
							<text style="font-size: 30rpx;color: #9c9c9c;">收藏的商品</text>
						</view>
					</van-col>
					<van-col span="6">
						<view class="column">
							<text style="font-size: 38rpx;color: #ff0000;">0</text>
							<text style="font-size: 30rpx;color: #9c9c9c;">关注的商品</text>
						</view>
					</van-col>
					<van-col span="6">
						<view class="column">
							<text style="font-size: 38rpx;color: #ff0000;">0</text>
							<text style="font-size: 30rpx;color: #9c9c9c;">我的足迹</text>
						</view>
					</van-col>
				</van-row>
			</view>
		</view>
	</view>
</template>

<script>
import { Login } from "../../api/api.js";
	export default {
		data() {
			return {
				url: wx.getStorageSync("url") ||
					"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
				nickName: wx.getStorageSync("nickName") || "微信用户"
			};
		},
		onLoad() {
			
		},
		methods:{
			dologin(){
			  wx.getUserProfile({
				  desc:'用于完善会员资料',
				  success:async (res)=>{
					  console.log(res)
					  if(res.errMsg=='getUserProfile:ok'){
						  let {
							  encryptedData,
							  rawData,
							  iv,
							  signature
						  }=res
						  let loginFrom={
							  encryptedData: encryptedData,
							  rawData: rawData,
							  iv: iv,
							  signature: signature,
							  code: ""
						  }
						  let [err,ress]=await uni.login()
						  console.log('1234',ress)
						  if(ress.errMsg=='login:ok'){
							  loginFrom.code = ress.code
							  wx.setStorageSync('nickName',res.userInfo.nickName)
						      wx.setStorageSync('url',res.userInfo.avatarUrl)
						      this.nickName=res.userInfo.nickName
							  this.url=res.userInfo.avatarUrl
							  console.log('123422',this.nickName)
						  }
						  let logins=await Login({data:loginFrom})
						  console.log('1111',logins)
						  wx.setStorageSync('token','Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo')
					  }
				  }
			  })
			}
		}
	}
</script>

<style lang="scss">
.big {
		width: 100%;
		height: 660rpx;
		position: relative;

		.avatar {
			width: 40%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			// text-align: center;

			.avatarName {
				width: 74%;
				height: 208rpx;
				border-radius: 50%;
				text-align: center;
				overflow: hidden;
				margin-left: 32rpx;
			}

			button[plain] {
				border: 0;
				text-align: center;
				margin: 0;
				padding: 0;
			}
		}

		.columnBig {
			width: 90%;
			padding: 10rpx;
			background: #fff;
			box-shadow: 3rpx 5rpx 15rpx rgba($color: #9c9c9c, $alpha: .6);
			box-sizing: border-box;
			position: absolute;
			// bottom: 3rpx;
			left: 50%;
			transform: translate(-50%, 0);

			.column {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
			}
		}

	}
</style>
